<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	<style>
		body{
			background-color:  #f5f5f7
		}
		img{
			display: block;
		}

		li{
			display: inline-block;
			margin: 10px;
			font-weight: bold;
		}
		li:hover{
			color: orange;
			cursor: pointer;
		}
	</style>
	<body>
		<center>
		<ul>
			<li>选项1</li>
			<li>选项2</li>
			<li>选项3</li>
			<li>选项4</li>
			<li>选项5</li>
		</ul>
		<img src="img/img1-lg.jpg"/>
		<center>
	</body>
	<script>
		$(function(){
			var imgSrc=["img/img1-lg.jpg",
			             "img/img2-lg.jpg","img/img3-lg.jpg",
			             "img/img4-lg.jpg","img/img5-lg.jpg"];
			$('li').click(function(){
				$('li').removeAttr('style');
				$(this).css('color','orange');
				$('img').attr('src',imgSrc[$(this).index()]);
				});
			});
	</script>
</html>
